<template>
    <div class="reportPanel">
        <div class="reportHeader">
            <h3>{{ reportTime }}火情日报</h3>
        </div>
        <div class="fireDataBox">
            <h3>一、基本情况</h3>
            <div class="firstItem"
                v-for="(itemA, indexA) of statisticsInfo.tableList"
                :key="indexA">
                <h4>{{ itemA.title1 }}</h4>
                <!-- <p>{{itemA.title2}}（{{statisticsInfo.contentInfo.startTime}}-{{statisticsInfo.contentInfo.endTime}}）</p> -->
                <div class="tableBox">
                    <el-table
                        border
                        class="elTable"
                        :data="itemT"
                        v-for="(itemT, indexT) of itemA.data"
                        :key="indexT"
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            :index="
                                (index) => {
                                    return index + indexT * itemA.step + 1;
                                }
                            "
                        >
                        </el-table-column>
                        <el-table-column
                            v-for="(
                                itemTheader, indexTheader
                            ) of itemA.therader"
                            :key="indexTheader"
                            :prop="itemTheader.prop"
                            :label="itemTheader.label"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="content-second" v-show="true">
                <h3>二、火情核实情况</h3>
                <div
                    class="secondItem"
                    v-for="(itemInfo, indexInfo) of statisticsInfo.fireInfoList"
                    :key="indexInfo"
                >
                    {{ indexInfo + 1 }}、{{ itemInfo.observeTime }}，位于{{
                        itemInfo.place
                    }}（坐标：{{ itemInfo.longitude }}°E，{{
                        itemInfo.latitude
                    }}°N），监测预判为{{
                        itemInfo.vegType
                    }}火灾，请输入核实结果：
                    
                    <el-input v-model="itemInfo.checkDesc"></el-input>
                </div>
                <div
                    class="secondItem"
                    v-if="statisticsInfo.fireInfoList.length == 0"
                >
                    {{ statisticsInfo.contentInfo.startTime }}至{{
                        statisticsInfo.contentInfo.endTime
                    }}未发现火情
                </div>
            </div>
            <div class="content-third">
                <h3>三、火灾防控建议</h3>
                <div
                    class="thirdItem"
                    v-if="
                        statisticsInfo.suggest.timeTop.length > 0 ||
                        statisticsInfo.suggest.placetop.length > 0 ||
                        statisticsInfo.suggest.typeTop.length > 0
                    "
                >
                    <p class="describe">
                        <span>系统监测到</span>
                        <span v-if="statisticsInfo.suggest.timeTop.length > 0"
                            >{{
                                statisticsInfo.suggest.timeTop[0]
                            }}时间段疑似发生{{
                                statisticsInfo.suggest.timeTop[1]
                            }}起火情，建议指挥中心相关人员在此时间段加强火情核查工作;</span
                        >
                        <span v-if="statisticsInfo.suggest.placetop.length > 0"
                            >{{
                                statisticsInfo.suggest.placetop[0]
                            }}疑似共发生{{
                                statisticsInfo.suggest.placetop[1]
                            }}起火情，建议{{
                                statisticsInfo.suggest.placetop[0]
                            }}应急管理局加强火情核实与火灾防控工作;</span
                        >
                        <span v-if="statisticsInfo.suggest.typeTop.length > 0"
                            >全省疑似共发生{{
                                statisticsInfo.suggest.typeTop[1]
                            }}起{{
                                statisticsInfo.suggest.typeTop[0]
                            }}火情，建议加强{{
                                statisticsInfo.suggest.typeTop[0]
                            }}防灭火工作。</span
                        >
                    </p>
                    <!-- <p class="remark">建议加强森林火情监测服务系统侦测火点的复核工作。</p>
                <p class="remark">建议森林防火部成员单位继续加强督导检查工作。</p> -->
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="statisticsInfo.suggestText"
                    ></el-input>
                </div>
                <div
                    class="secondItem"
                    v-if="statisticsInfo.fireInfoList.length == 0"
                >
                    <p>
                        {{ statisticsInfo.contentInfo.startTime }}至{{
                            statisticsInfo.contentInfo.endTime
                        }}未发现火情
                    </p>
                </div>
            </div>
        </div>
        <div class="report-showBtn">
            <p @click="showControl(true)">日报预览</p>
        </div>
        <FireMonitorDayReportPreview
            v-if="showReport"
            :statisticsInfo="statisticsInfo"
            @closePreview="showControl"
        ></FireMonitorDayReportPreview>
    </div>
</template>

<script>
import axios from "axios";
import FireMonitorDayReportPreview from "./FireMonitorDayReportPreview.vue";
let entityModel = [];
export default {
    name: "reportPanel",
    data() {
        return {
            statisticsInfo: {},
            reportTemp: {
                template: {
                    headerBig: "森林防火监测预警信息日报",
                    reportCode: "",
                    reportUnit: "海南省应急管理厅",
                    reportTime: "2021-06-11 16:00:00",
                    reporterUnit: "海南省应急管理厅",
                    reporter: "×××",
                },
                contentInfo: {
                    startTime: "2021-06-11 16:00:00",
                    endTime: "2021-06-11 16:00:00",
                    fireNum: 0,
                },
                tableList: [
                    {
                        title1: "（一）火情发生时刻统计",
                        title2: "表1 24小时火情起数统计",
                        step: 1,
                        label: "timeTop",
                        therader: [
                            { prop: "label", label: "时间段" },
                            { prop: "count", label: "火点数" },
                        ],
                        data: [
                            [
                                { label: "22-23", count: 0 },
                                { label: "23-24", count: 0 },
                                { label: "24-01", count: 0 },
                                { label: "01-02", count: 0 },
                            ],
                        ],
                    },
                    {
                        title1: "（二）各市县火情起数统计",
                        title2: "表2 火情分布地区统计",
                        step: 10,
                        label: "placetop",
                        therader: [
                            { prop: "place", label: "行政区划" },
                            { prop: "num", label: "火点数" },
                        ],
                        data: [
                            [
                                { place: "海口市", num: 0 },
                                { place: "三亚市", num: 0 },
                                { place: "三沙市", num: 0 },
                                { place: "儋州市", num: 0 },
                                { place: "五指山市", num: 0 },
                                { place: "文昌市", num: 0 },
                                { place: "琼海市", num: 0 },
                                { place: "万宁市", num: 0 },
                                { place: "东方市", num: 0 },
                                { place: "定安县", num: 0 },
                                { place: "屯昌县", num: 0 },
                                { place: "澄迈县", num: 0 },
                                { place: "临高县", num: 0 },
                                { place: "白沙县", num: 0 },
                                { place: "昌江县", num: 0 },
                                { place: "乐东县", num: 0 },
                                { place: "陵水县", num: 0 },
                                { place: "保亭县", num: 0 },
                                { place: "琼中县", num: 0 },
                                { place: "洋浦经济开发区", num: 0 },
                            ],
                        ],
                    },
                    {
                        title1: "（三）火情类型起数统计",
                        title2: "表3 火情分类型统计",
                        step: 1,
                        label: "typeTop",
                        therader: [
                            { prop: "type", label: "植被类型" },
                            { prop: "num", label: "火点数" },
                        ],
                        data: [
                            [
                                { type: "森林火", num: 0 },
                                { type: "草地火", num: 0 },
                                { type: "农田火", num: 0 },
                                { type: "灌木火", num: 0 },
                                { type: "城市或荒漠火", num: 0 },
                            ],
                        ],
                    },
                ],
                fireInfoList: [],
                suggest: {
                    timeTop: [],
                    placetop: [],
                    typeTop: [],
                },
                suggestText:
                    "建议加强森林火情监测服务系统侦测火点的复核工作。建议森林防火部成员单位继续加强督导检查工作。",
            },
            params: {}, //接口参数
            showReport: false,
        };
    },
    components: {
        FireMonitorDayReportPreview,
    },
    computed: {
        reportTime() {
            console.log(this.$store.state.dayReportFireTime);
            return this.$store.state.dayReportFireTime;
        },
    },
    watch: {
        reportTime: {
            handler(val) {
                console.log(val);
                this.params.endTime = `${val} 16:00:00`;
                this.statisticsInfo = JSON.parse(
                    JSON.stringify(this.reportTemp)
                );
                val && this.getData();
            },
            immediate: true,
        },
    },
    mounted(){
        console.log("zhiixng")
    },
    methods: {
        // 预览控制
        showControl(type) {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month < 10 ? `0${month}` : month;
            day = day < 10 ? `0${day}` : day;
            let days = this.calcDays(this.params.endTime.split(" ")[0]);
            console.log(this.params.endTime.split("-")[0]);
            this.statisticsInfo.template.reportTime = `${year}年${month}月${day}日`;
            this.statisticsInfo.template.reportCode = `${year}-${days}`;
            this.showReport = type;
        },
        // 获取所有数据
        getData() {
            this.getDataByAll().then((judge) => {
                console.log(judge);
                if (judge) {
                    this.getDataByTime();
                    this.getDataByArea();
                    this.getDataByType();
                }
            });
        },
        // 按时间段统计
        async getDataByTime() {
            let res24 = await axios.get(
                `${window.huoqingApiUrl}/fire/statistics/24`,
                { params: this.params }
            );
            if (res24.data.length > 0) {
                this.statisticsInfo.tableList[0].data[0] = res24.data;
            }
            // 最值计算
            let timeRe = JSON.parse(
                JSON.stringify(this.statisticsInfo.tableList[0].data[0])
            );
            timeRe.sort((a, b) => {
                return b.count - a.count;
            });
            if (timeRe[0].count > 0) {
                for (let i = 0; i < timeRe.length; i++) {
                    if (i === 0) {
                        this.statisticsInfo.suggest.timeTop.push(
                            timeRe[i].label,
                            timeRe[i].count
                        );
                    } else if (
                        timeRe[i].count ===
                        this.statisticsInfo.suggest.timeTop[1]
                    ) {
                        this.statisticsInfo.suggest.timeTop[0] +=
                            timeRe[i].label;
                    } else {
                        break;
                    }
                }
            }
        },
        // 按行政区划统计
        async getDataByArea() {
            let areaRes = await axios.get(
                `${window.huoqingApiUrl}/fire/statistics/24/region`,
                { params: this.params }
            );
            if (areaRes.data.length > 0) {
                this.statisticsInfo.tableList[1].data[0] = areaRes.data;
            }
            // 最值计算
            let placeRe = JSON.parse(
                JSON.stringify(this.statisticsInfo.tableList[1].data[0])
            );
            placeRe.sort((a, b) => {
                return b.num - a.num;
            });
            if (placeRe[0].num > 0) {
                for (let i = 0; i < placeRe.length; i++) {
                    if (placeRe[i].place === "未知") continue;
                    if (this.statisticsInfo.suggest.placetop.length === 0) {
                        this.statisticsInfo.suggest.placetop.push(
                            placeRe[i].place,
                            placeRe[i].num
                        );
                    } else if (
                        placeRe[i].num ===
                        this.statisticsInfo.suggest.placetop[1]
                    ) {
                        this.statisticsInfo.suggest.placetop[0] +=
                            placeRe[i].place;
                    }
                }
            }
        },
        // 按下垫面类型统计
        async getDataByType() {
            let typeRes = await axios.get(
                `${window.huoqingApiUrl}/fire/statistics/24/vegType`,
                { params: this.params }
            );
            if (typeRes.data.length > 0) {
                this.statisticsInfo.tableList[2].data[0] = typeRes.data;
            }
            // 最值计算
            let typeRe = JSON.parse(
                JSON.stringify(this.statisticsInfo.tableList[2].data[0])
            );
            typeRe.sort((a, b) => {
                return b.num - a.num;
            });
            if (typeRe[0].num > 0) {
                for (let i = 0; i < typeRe.length; i++) {
                    if (i === 0) {
                        this.statisticsInfo.suggest.typeTop.push(
                            typeRe[i].type,
                            typeRe[i].num
                        );
                    } else if (
                        typeRe[i].num === this.statisticsInfo.suggest.typeTop[1]
                    ) {
                        this.statisticsInfo.suggest.typeTop[0] +=
                            typeRe[i].type;
                    }
                }
            }
        },
        // 获取所有火点简要信息
        async getDataByAll() {
            let judge = true;
            let simpleRes = await axios.get(
                `${window.huoqingApiUrl}/fire/statistics/24/simple`,
                { params: this.params }
            );
            if (JSON.stringify(simpleRes.data) != "{}") {
                this.statisticsInfo.contentInfo.fireNum = simpleRes.data.total;
                this.statisticsInfo.fireInfoList = simpleRes.data.data;
                this.dataToEarth(simpleRes.data.data);
            } else {
                judge = false;
            }
            return judge;
        },
        // 点位上球
        dataToEarth(data) {
            entityModel.forEach((ele) => {
                viewer.entities.remove(ele);
            });
            entityModel = [];
            //添加标记
            for (let item of data) {
                let imgName = this.changeImgName(item.vegType);
                let entity = viewer.entities.add({
                    name: item.vegType + item.id,
                    id: item.id,
                    position: Cesium.Cartesian3.fromDegrees(
                        item.longitude,
                        item.latitude
                    ),
                    billboard: {
                        // image: `./images/fireIcon/caodi.png`,
                        image: `./images/fireReport/fireIcon/${imgName}`,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        width: 30,
                        height: 30,
                        scaleByDistance: new Cesium.NearFarScalar(
                            10000,
                            1.5,
                            100000,
                            1
                        ),
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    },
                    entityType: "fire",
                });
                entityModel.push(entity);
            }
        },
        // 格式化图片
        changeImgName(data) {
            let imgName;
            switch (data) {
                case "森林": {
                    imgName = "senlin.png";
                    break;
                }
                case "草地": {
                    imgName = "caodi.png";
                    break;
                }
                case "农田及自然植被": {
                    imgName = "nongtian.png";
                    break;
                }
                case "灌木": {
                    imgName = "guanmu.png";
                    break;
                }
                case "城市或荒漠": {
                    imgName = "chengshi.png";
                    break;
                }
            }
            return imgName;
        },
        // 计算第几天
        calcDays(data) {
            // console.log(new Date(data),  new Date(new Date(data).getFullYear().toString()))
            let days =
                Math.ceil(
                    (new Date(data) -
                        new Date(new Date(data).getFullYear().toString())) /
                        (24 * 60 * 60 * 1000)
                ) + 1;
            days = days < 10 ? `00${days}` : days < 100 ? `0${days}` : days;
            return days;
        },
    },
    beforeUnmount() {
        entityModel.forEach((ele) => {
            viewer.entities.remove(ele);
        });
    },
};
</script>
<style lang="stylus">
.reportPanel {
    .el-table--border, .el-table--group{
        border:1px solid #606266;
    }
    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
        border:1px solid #606266;
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom:1px solid #606266;
        border-left:1px solid #606266;
    }
    .el-table {
        background-color: unset;
        margin: 10px 0;
        
        .el-table__expanded-cell, th, tr, td, th.is-leaf {
            background-color: transparent;
            color: #fff;
            //border-bottom: 1px;
            text-align: center;
        }
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td, .el-table--border::after, .el-table--group::after, .el-table::before {
        background: transparent;
    }
    .el-textarea__inner{
        font-size:20px;
        min-height:70px;
    }
    .fireDataBox {
        .content-second {
            .el-input {
                text-indent: 0;

                .el-input__inner {
                    background: rgba(16, 34, 67, 0.5);
                    border: 1px solid rgba(23, 208, 255, 0.5);
                    color: #fff;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
.reportPanel {
    width: vw(400);
    height: vh(955);
    display: flex;
    flex-direction: column;
    .reportHeader {
        height: vh(30);
        line-height:vh(30);
        margin-bottom: vh(20);
        font-size: vw(20);
        width:80%;
        margin: vh(5) auto;
        padding-bottom: vh(40);
        font-size: vw(20);
        text-align: center;
        font-family: 'Source Han Serif SC, Source Han Serif SC-Heavy';
        font-weight: 800;
        border-bottom:2px solid #18485d;
    }

    .fireDataBox {
        flex: 1;
        overflow: auto;
        text-align: left;
        margin: 0 auto;
        h3{
            width:92%;
            margin: 0 auto;
            font-weight: 100;
            line-height: vh(30);
            font-size: vw(18);
            color:#00DEFF;
        }
        .firstItem{
            margin:0 auto;
            width:92%;
            h4{
                font-weight: 100;
                line-height: vh(30);
                font-size: vw(18);
                color:#00DEFF;
            }
        }
        .content-second {
            margin:0 auto;
            width:92%;
            h3{
                font-weight: 100;
                line-height: vh(30);
                font-size: vw(18);
                color:#00DEFF;
            }
            .secondItem {
                // text-align: justify;
                text-indent: 2em;
                line-height: vh(36);

            }
        }
        .content-third {
            margin:0 auto;
            width:92%;
            margin-bottom:vh(30);
            margin-top:vh(40);
            .thirdItem {
                text-indent: 2em;
                line-height: 26px;
                .describe{
                    line-height:vh(33);
                    margin-top:vh(15);
                    margin-bottom:vh(15);
                }
            }
        }
    }

    .report-showBtn {
        p {
            cursor: pointer;
            float: right;
            border: 1px solid #ddd;
            text-align: center;
            height: 30px;
            line-height: 30px;
            width: 100px;
            margin-top: 5px;
        }
    }
}
</style>